<template>
    <div>
        <el-dialog v-model="dialogVisible" :before-close="handleClosed">
            <el-form>
                <el-row>
                    <el-form-item label="车间名称">
                        <el-input v-model="queryData.name" placeholder="车间名称"></el-input>
                    </el-form-item>
                    <el-form-item label="面积" label-width="100">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="单位：平方米"
                                placement="top-start"
                        >
                            <el-input-number :min="0" :precision="2" :step="0.1" v-model="queryData.area"></el-input-number>
                        </el-tooltip>
                    </el-form-item>
                </el-row>
                <el-form-item label="车间备注">
                    <el-input type="textarea" placeholder="输入车间备注" v-model="queryData.comments"></el-input>
                </el-form-item>
            </el-form>
            <el-form>
                <el-row>
                    <el-form-item label="负责人" label-width="66">
                        <el-input v-model="queryData.emp" style="width:500px" t
                                  placeholder="请输入负责人名称"></el-input>
                    </el-form-item>
                    <el-form-item label-width="10">
                        <el-button type="primary" @click="queryEmp">查询</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-table :data="emData" height="300">
                <el-table-column prop="idEmployee" label="编号"></el-table-column>
                <el-table-column prop="position" label="职务"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="绑定后，该员工将作为车间负责人"
                                placement="top-start"
                        >
                            <el-button :disabled="queryData.area===0 && queryData.name===''" type="primary" plain
                                       @click="handleBind(scope.row)">绑定
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import empAPI from "@/util/request-md/emp/empAPI.js";
import workshopAPI from "@/util/request-md/workshop/workshop.js";

export default {
    name: "AddWorkshopDialog",
    emits: ['callClosed'],
    props: ['visible', 'isEdit', 'info'],
    watch: {
        'visible'(val) {
            this.dialogVisible = val;
        },
        'isEdit'(val) {
            // if (val) {
                this.queryData = this.info;
            // }
        }
    },
    data() {
        return {
            dialogVisible: false,
            queryData: {
                comments: '',
                name: '',
                emp: '',
                idEmp: -1,
                area: 0
            },
            emData: [],
            selection: [],
        }
    },
    methods: {
        handleClosed() {
            this.$emit('callClosed');
        },

        handleBind(data) {
            if (this.isEdit) {
                //提示该操作将修改车间信息
                this.$confirm('是否修改该车间信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //TODO:修改车间信息
                    this.queryData.idEmp = data.idEmployee;
                    workshopAPI.updateWorkshop(this.queryData, res => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                            })
                        }
                    })
                })
            } else {
                //  提示是否绑定这个data
                this.$confirm('是否绑定该员工?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //TODO:绑定员工
                    this.queryData.idEmp = data.idEmployee;
                    workshopAPI.addWorkshop(this.queryData, res => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '绑定成功!'
                            });
                            this.$emit('callClosed');
                        } else {
                            this.$message.error(`网络异常:${res.msg}`);
                            this.$emit('callClosed');
                        }
                    })

                });
            }

        },

        //加载数据
        loadEmpData() {
            empAPI.getEmployeesByName(this.queryData, (data) => {
                if (data.code === 200) {
                    this.emData = data.data;
                } else {
                    this.$message.error(`网络异常:${data.msg}`);
                }
            })
        },
        //查询员工信息
        queryEmp() {
            //TODO:查询员工信息
            this.loadEmpData();
        }
    },
    mounted() {
        this.loadEmpData();
    }
}
</script>

<style scoped>

</style>